<template>
  <div class="friendContainer">
      <!-- 搜索框 -->
     <yl-search :submit="search" :ylstyle="searchStyle" @getValue="getMobile"></yl-search>
     <div class="menu">
         <div  @click="showapply">新的朋友</div>
         <div @click="newgroup">新建分组</div>
    </div>
     <!-- 好友列表 -->
     <div class="fList">
         <!-- 分组 -->
         <div>
            <div class="item" v-for="(cir,num) in circle" :key="num" @click="jump(num)">
                <div class="left">
                    <img src="./img/family.png" class="mycir">
                </div>
                <div class="midC">
                    <p>{{cir.name}}</p>
                    <span v-if="cir.number>0">{{cir.number}}人</span>
                </div>
                <div class="rightC">
                    <!-- <p>{{cir.time}}</p> -->
                </div>
            </div>  
         </div>
         <!-- 好友 -->
         <div class="item"  v-for="(item,index) in list" :key="index">
                <div class="left">
                    <img :src="item.user.photo"  @click="listClick(index)">
                </div>
                <div class="mid">
                    <p style="line-height:1rem" v-if="item.remark==''">{{item.friendRemarkName}}</p>
                    <p style="line-height:1rem" v-if="item.remark!=''">{{item.remark}}</p>
                    <span>{{item.uMsg}}</span>
                </div>
                <div class="right">
                    <!-- 3 -->
                </div>
         </div>
     </div>
  </div>
</template>
<script>
import ylSearch from '@/components/search'
import { Toast } from 'mint-ui';
export default {
  components:{
    ylSearch
  },
  data(){
    return{
      list: [],
      searchStyle:{
        height:'.8',//高度，必须
        bgcolor:'#FFB36E',//背景，可选
        remind:'搜索想找的人',//placeholder可选
        close:false, //开关 可选
        }, 
          circle:[
            //   {"name":"我的家庭群 01","count":'3',"time":'15.30',"pic":require('./img/family.png')},
            //   {"name":"我的家庭群 02","count":'52',"time":'15.30',"pic":require('./img/family.png')},
            //   {"name":"我的家庭群 03","count":'11',"time":'15.30',"pic":require('./img/family.png')},
          ]     
    }
  },
  methods:{
    getMobile(data){//搜索框
            console.log(data)
        },
    search(event){//搜索框
        event.preventDefault()
       let instance =  Toast({
            message: '功能尚在完善中',
            iconClass: 'icon icon-success'
            });
            setTimeout(() => {
                instance.close();
                }, 2000);
         console.log("搜到了")
     },
     newgroup(){//新建分组
        let a={
            type:"friend"
        }
        this.$store.commit("addorfo",a)
        // this.$router.push({path:"/common/add"})
         this.$router.push({name:"newgroup"})
     },
     jump(index){//跳转地图
        //  console.log(this.circle)
        let a=this.circle[index];
        a.type="friend"
        this.$store.commit('choseGroup',a)
        let data={
            groupID:this.circle[index].id,
            userId:this.$store.state.choseGroup.userID
        }
        this.ylAjax.showgroupMap(data)
            .then(res=>{
                console.log(res)
                if(res.state==0){
                    this.$store.commit('mapdata','') 
                    this.$store.commit('mapdata',res)  
                    this.$router.push({name:'friendMap'});         
                }else{
                    this.$store.commit('mapdata','')  
                    this.$router.push({name:'friendMap'}); 
                }
            })
     },
    listClick(index){//点击用户头像
      let data={
          userId:this.list[index].friendID//好友ID
      }
    this.ylAjax.searchFriendbyId(data)
               .then(res=>{
                    if(res.state==0){
                        this.$store.commit("userDetail",res.data)
                        this.$store.commit("stateWrite","friend")
                                    // this.$router.push({path:"/common/userIntr",query:{status:"handel",srcuser:this.list[index]}})
                        this.$router.push({path:'/common/userIntr',query:{status:'msg'}})
                    }else{
                        this.$dialog.alert({mes:res.message})
                    }
               })
                .catch(error=>{
                    throw error
               })
    },
    showapply(){//查看申请列表
    let data={
        userId:localStorage.userid
    }
    this.ylAjax.applyList(data)
            .then(res=>{
                    if(res.state==0){
                        console.log(res.data)
                         this.$router.push({name:'applyList'})
                    }
                })
    },
    myfriend(){//用户列表     
     let data={
        userId:localStorage.userid
     }
     this.ylAjax.friendList(data)
                .then(res=>{
                   if(res.state==0){
                       this.list=res.data
                    //    console.log(this.list)
                   }
                })
                .catch(error=>{
                    throw error
                })
    },
    friendgroup(){//好友分组列表
        let data={
            userId:localStorage.userid
        }
        this.ylAjax.showfriendgroupWhole(data)
                   .then(res=>{
                    //    console.log(res)
                       let a=res.data;
                       this.ylAjax.showGroupNum(data)
                            .then(re=>{
                                // console.log(re)
                            for(let i=0;i<res.data.length;i++){
                                a[i].number=re.data[i].number
                            }
                        this.circle=a
                        }) 
                   })
    }
  },
  activated(){
    //   console.log(1)
      this.myfriend()
      this.friendgroup()
  }
}
</script>
<style lang="less" scoped>
@import "~less/base";
    .friendContainer{
        img{
            max-width: 100%;
            max-height: 100%;
        }
        .menu{//添加分组，新的朋友
           display: flex;
           line-height: 1rem;
           border-bottom: 1px solid @color-border5;
           div{
               flex: 0 0 50%;
               text-align: center;  
               font-size: 14px;
           }
           div:nth-child(1){
               border-right: 1px solid @color-border5;
           }
        }
        .fList{//好友列表
            position: absolute;
            width: 100%;
            top: 2.8rem;
            bottom: 0;
            overflow-x: hidden;
            overflow-y: scroll;
            .group{//分组
                display: flex;
                height: 1.3rem;
                border-bottom: 1px solid @color-border4;     
            }
            .item{//好友
                display: flex;
                height: 1.3rem;
                border-bottom: 1px solid @color-border4;
               .left{//头像
                    flex: 0 0 20%;
                    text-align: center;
                    img{
                        width: 1rem;
                        border-radius: 50%;
                        margin-top: .15rem;
                        border: 0.04rem solid @color-border4;
                    }
                }
                .mid{
                    flex: 0 0 60%
                }
                .midC{//群
                    flex: 0 0 60%;
                    line-height: .6rem;
                    span{
                        color: @color-c2;
                    }
                }
                .rightC{//群
                    flex: 0 0 20%;
                    line-height: 1.3rem;
                    text-align: center;
                }
                .right{
                    flex: 0 0 20%
                }
            }
        }
    }
</style>
